import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd'
import { connect } from 'react-redux'
import { Link, withRouter } from 'react-router-dom'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

class Home extends Component {
    render() {
        const { routes, location } = this.props
        return (
            <div className="h100">
                <Layout>
                    <Header className="header">
                        <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <Sider width={200} className="site-layout-background">
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                            >
                                {
                                    routes.map((item, index) => {
                                        return <Menu.Item key={ index } >
                                            <Link to={ item.path }>
                                                { item.title }
                                            </Link>
                                        </Menu.Item>
                                    })
                                }
                            </Menu>
                        </Sider>
                        <Layout style={{ padding: '0 24px 24px' }}>
                            {/* 面包屑 */}
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                {
                                    location.pathname.split('/').map((item, index ) => {
                                        return <Breadcrumb.Item key = { index }>
                                            { item }
                                        </Breadcrumb.Item>
                                    })
                                }
                            </Breadcrumb>
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                }}
                            >
                                Content
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>,
            </div>
        )
    }
}

let mapState = (state) => {
    const { routes } = state
    return {
        routes
    }
}

Home = withRouter(Home)

export default connect(mapState)(Home)
